<template>
	<view>
		<view>
			<table-title content="停车位申请表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor" :isLast="true"></view-item>
			</view>
			<small-title :isNeed="true" content="车位类型"></small-title>
			<view style="margin-bottom: 20rpx;">
				<radio-group :disabled="!(status === -1 || status === 4)" class="radiogroup-style">
					<view @click="chooseNormal(true)" class="first-radio">
						<radio :disabled="!(status === -1 || status === 4)" :checked="normalParking && (!otherParking)" color="#FF0000"></radio>
						<view >普通车位</view>
					</view>
					<view  @click="chooseNormal(false)" class="second-radio">
						<radio :disabled="!(status === -1 || status === 4)" :checked="(!normalParking) && (!otherParking)" color="#FF0000"></radio>
						<view>子母车位</view>
					</view>
					<view  @click="chooseOther(true)" class="second-radio">
						<radio :disabled="!(status === -1 || status === 4)" :checked="otherParking" color="#FF0000"></radio>
						<view>其它</view>
					</view>
				</radio-group>
			</view>
			<view v-show="otherParking">
				<small-title :isNeed="true" content="办理备注"></small-title>
				<textarea class="textarea-content-style" :disabled="!(status === -1 || status === 4)" v-model="otherContent"></textarea>
			</view>
			<u-divider bg-color="#F1F1F1">车位办理信息一</u-divider>
			<small-title :isNeed="true" content="车主姓名"></small-title>
			<textarea class="textarea-name-style" maxlength="-1" :disabled="!(status === -1 || status === 4)" :value="userList[0].userName" @input="inputNameDetialFirst"></textarea>
			<small-title :isNeed="true" content="车牌号"></small-title>
			<textarea class="textarea-name-style" maxlength="-1" :disabled="!(status === -1 || status === 4)" :value="userList[0].carNumber" @input="inputParkNumDetialFirst"></textarea>
			<small-title :isNeed="true" content="上传材料"></small-title>
			<park-card-img v-if="processFlag || state=='待申请'" :firstImg="userList[0].imageList[0]" :secondImg="userList[0].imageList[1]" 
			:thirdImg="userList[0].imageList[2]" :fourthImg="userList[0].imageList[3]" :fifthImg="userList[0].imageList[4]" 
			:sixthImg="userList[0].imageList[5]" :otherImg="userList[0].imageList[6]" :key="1" :isChange="state==='待申请' || state==='已驳回申请'" v-on:addImg="addImgFirst"></park-card-img>
			
			<view v-show="!normalParking && (!otherParking)">
				<u-divider bg-color="#F1F1F1">车位办理信息二</u-divider>
				<small-title :isNeed="true" content="车主姓名"></small-title>
				<textarea class="textarea-name-style" maxlength="-1" :disabled="!(status === -1 || status === 4)" :value="userList[1].userName" @input="inputNameDetialSecond"></textarea>
				<small-title :isNeed="true" content="车牌号"></small-title>
				<textarea class="textarea-name-style" maxlength="-1" :disabled="!(status === -1 || status === 4)" :value="userList[1].carNumber" @input="inputParkNumDetialSecond"></textarea>
				<small-title :isNeed="true" content="上传材料"></small-title>
				<park-card-img v-if="processFlag || state=='待申请'" :firstImg="userList[1].imageList[0]" :secondImg="userList[1].imageList[1]" 
				:thirdImg="userList[1].imageList[2]" :fourthImg="userList[1].imageList[3]" :fifthImg="userList[1].imageList[4]" 
				:sixthImg="userList[1].imageList[5]" :otherImg="userList[1].imageList[6]" :key="1" :isChange="state==='待申请' || state==='已驳回申请'" v-on:addImg="addImgSecond"></park-card-img>
			</view>
			
			<view v-show="!otherParking" class="small-title">办理费用：{{spend}} 元</view>
			<view v-if="status > 1 && status != 4">
				<small-title :isNeed="true" content="支付信息截图"></small-title>
				<image :class="chargeImg=='/static/uploadImg.png' ? 'pay-image' : 'pay-image-border'" :src="chargeImg" mode="scaleToFill" @tap='chooseImage'></image>
			</view>
			<view v-if="status > 1 && status != 4">
				<small-title :isNeed="true" content="车位租用协议"></small-title>
				<view class="download-text" @click="downloadFile(0)">{{ '车位租用协议.docx' }}</view>
			</view>
			<small-title content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="status===2" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="modOrder">确认已付款</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===-1" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="addOrder">立即申请</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===4" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="reAddOrder" >重新申请</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
		<l-file
		    ref="lFile" 
		></l-file>
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		myUploadFile,
		myDownloadFile,
		syncGetOrder,
		syncPriceInfo,
	} from "../../../util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				processFlag:false,
				token:'',
				recordId: '待分配',
				processNo:'待分配',
				state: '',
				status: -1,
				userMsg:{'userName':'','userPhone':'',
					'userCompany':'','userBuilding':''},
				normalParking:true,
				otherParking:false,
				otherContent:'',
				spend:0,
				parkCardPrice:{'normal':0,'vip':0,'double':0},
				userList:[
					{'userName':'',
					'parkType':0,
					'carNumber':'',
					'imageList':['/static/uploadImg.png',
								'/static/uploadImg.png',
								'/static/uploadImg.png',
								'/static/uploadImg.png',
								'/static/uploadImg.png',
								'/static/uploadImg.png',
								'/static/uploadImg.png',
								0,0,0,0,0,0,0
								]
					},
					{'userName':'',
					'parkType':0,
					'carNumber':'',
					'imageList':['/static/uploadImg.png',
								'/static/uploadImg.png',
								'/static/uploadImg.png',
								'/static/uploadImg.png',
								'/static/uploadImg.png',
								'/static/uploadImg.png',
								'/static/uploadImg.png',
								0,0,0,0,0,0,0
								]
					}
				],
				chargeImg:'/static/uploadImg.png',
				chargeImgId:-1,                                     //支付信息截图
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'制卡完毕','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'收到卡片和票据','time':'2020-03-03 03:33:33'}
				],
				proccessListDefult:[],
				previewUrl:ONLINE_SERVER_ADDRESS_BASE + '/file/preview/',
				docxFileId:0,
			}
		},
		methods: {
			downloadFile(fileType,index){
				let fileId = 0
				if(fileType == 0){
					fileId = this.docxFileId
				}
				if(!(parseInt(fileId) > 0)){
					uni.showModal({
						content:'找不到该文件,请检查是否已上传。',
						showCancel:false
					})
					return 0
				}
				this.$refs.lFile.download({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/file/download/` + fileId,
					token:this.token,
				})
				.then(path=>{
				    // 打开文件
				    this.$refs.lFile.open(path);
				});
			},
			isLicenseNo(str) {
			      return /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/.test(str);
			},
			
			inputNameDetialFirst(e){
				this.userList[0].userName = e.detail.value
			},
			
			inputParkNumDetialFirst(e){
				this.userList[0].carNumber = e.detail.value
			},
			
			inputNameDetialSecond(e){
				this.userList[1].userName = e.detail.value
			},
			
			inputParkNumDetialSecond(e){
				this.userList[1].carNumber = e.detail.value
			},
			
			chooseNormal(flag){
				if(this.status == -1 || this.status == 4){
					this.otherParking = false
					this.normalParking = flag
					if(flag){
						this.userList[0].parkType = 0
						this.userList[1].parkType = 0
						this.spend = this.parkCardPrice.vip
					}else{
						this.userList[0].parkType = 2
						this.userList[1].parkType = 2
						this.spend = this.parkCardPrice.double
					}
				}
			},
			
			chooseOther(flag){
				if(this.status == -1 || this.status == 4){
					this.otherParking = flag
					this.userList[0].parkType = -1
					this.userList[1].parkType = -1
				}
			},
			
			/*
			功能：子组件事件触发修改对应行的停车位办理信息
			参数：
			imageList：照片信息列表
			*/
			addImgFirst(imageList){
				console.log("[info]","调试父子组件通信，我是父组件" + imageList)
				var strs= new Array();
				strs=imageList.split(",");
				for(var i = 0; i < 7; i++){
					if(strs[i + 7]!=""){
						console.log("[info]","测试停车照片数组" + strs[i + 7])
						this.userList[0].imageList[i]=strs[i]
						this.userList[0].imageList[i + 7]=parseInt(strs[i + 7])
					}
				}
				this.$forceUpdate()
			},
			addImgSecond(imageList){
				console.log("[info]","调试父子组件通信，我是父组件" + imageList)
				var strs= new Array();
				strs=imageList.split(",");
				for(var i = 0; i < 7; i++){
					if(strs[i + 7]!=""){
						console.log("[info]","测试停车照片数组" + strs[i + 7])
						this.userList[1].imageList[i]=strs[i]
						this.userList[1].imageList[i + 7]=parseInt(strs[i + 7])
					}
				}
				this.$forceUpdate()
			},
			/*
			功能：支付截图点击事件触发修改或预览照片，如果是待申请 则点击修改照片，否则则是预览
			参数：无
			*/
			chooseImage(){
				console.log("ceshi",this.state)
				if(this.status == 2) {
					uni.chooseImage({
						count: 1,
						sourceType: ['album', 'camera'],
						// #ifdef MP-WEIXIN
						sizeType: ['compressed'],
						// #endif
						success: (res) => {
							let a = myUploadFile(this.token, res.tempFilePaths[0])
							 a.then((v)=>{
								 this.chargeImgId = v
							})
							this.chargeImg = res.tempFilePaths[0];
						}
					})
				}else{
					uni.previewImage({
						current: 0,
						urls: [this.chargeImg]
					})
				}
			},
			
			async loadImg(chargeFileId){
				// let _this = this
				const res = await uni.downloadFile({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/file/download/` + chargeFileId,
					header: {
						'Authorization': this.token,
					},
				})
				return new Promise((resolve, reject) => {
				        resolve(res[1].tempFilePath)
				})
			},
			/*
			功能：工单详细页处理通用函数
			参数：
			option：操作类型（先定成 创建、写入、查询）
			*/
			addOrder(){
				if(this.checkPara() == -1){
					return -1
				}
				console.log("[info]","工单已创建，工单号为：" + this.recordId)
				let content = '租户发起申请'
				let otherContent = ''
				if(this.otherParking){
					content = '租户发起其它类型车位申请，备注:' + this.otherContent
					if(this.otherContent == ''){
						otherContent = '无'
					}else{
						otherContent = this.otherContent
					}
					this.spend = 0
				}else{
					otherContent = '无'
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/parking-space/add`,
					header: {
						'Authorization': this.token,
					},
					data: {
						otherContent:otherContent,
						detail: JSON.stringify(this.userList),
						price:this.spend,
						commentMsg: content                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("提交成功",res.data);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					}
				})
			},
			checkPara(){
				let flag = 0
				if((!Number(this.spend) > 0) && !this.otherParking){
					uni.showModal({
						content:'停车位办理价格有误，请联系管家',
						showCancel:false
					});
					flag = -1
					return flag
				}
				if(this.userList[0].userName.trim() == "" || this.userList[0].carNumber.trim() == ""){
					uni.showModal({
						content:'车主姓名或车牌号不能为空',
						showCancel:false
					});
					flag = -1
					return flag
				}
				if(!this.isLicenseNo(this.userList[0].carNumber)){
					uni.showModal({
						content:'请输入正确的国内车牌号',
						showCancel:false
					});
					flag = -1
					return flag
				}
				if(this.otherParking && this.otherContent.trim() == ''){
					uni.showModal({
						content:'请输入其它类型车位办理描述',
						showCancel:false
					});
					flag = -1
					return flag
				}
				for(var i = 6; i < this.userList[0].imageList.length - 1; i++){
					if(this.userList[0].imageList[i] == 0){
						uni.showModal({
							content:'请上传必要材料',
							showCancel:false
						});
						flag = -1
						return flag
					}
				}
				if(!this.normalParking && !this.otherParking ){
					if(this.userList[1].userName.trim() == "" || this.userList[1].carNumber.trim() == ""){
						uni.showModal({
							content:'信息二中车主姓名或车牌号不能为空',
							showCancel:false
						});
						flag = -1
						return flag
					}
					if(!this.isLicenseNo(this.userList[1].carNumber)){
						uni.showModal({
							content:'信息二中请输入正确的国内车牌号',
							showCancel:false
						});
						flag = -1
						return flag
					}
					for(var i = 6; i < this.userList[1].imageList.length - 1; i++){
						if(this.userList[1].imageList[i] == 0){
							uni.showModal({
								content:'信息二中请上传必要材料',
								showCancel:false
							});
							flag = -1
							return flag
						}
					}
				}
				return flag
			},
			modOrder(){
				if(this.chargeImgId == -1){
					uni.showModal({
						content:'请上传支付截图',
						showCancel:false
					});
					return -1
				}
				console.log("[info]","收到停车位办结：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/parking-space/finish/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						payScreenshotId:this.chargeImgId,
						commentMsg: '租户已确认并已上传支付截图'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("停车位申请办结成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("停车位申请办结调用失败")
					}
				})
			},
			getOrder(){
				let a = syncGetOrder("parking-space/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("异步",res)
					 if(res.data.code == 200){
						 this.status = parseInt(res.data.data.status)
						 switch(this.status) {
						      case 0:
						         this.state = "待管家审核"
						         break;
						      case 1:
						         this.state = "待管家上传"
						         break;
						 	 case 2:
						         this.state = "待用户上传"
						 	    break;
						 	 case 3:
						         this.state = "待管家办结"
						 	    break;
						 	 case 4:
						         this.state = "已驳回申请"
						 	    break;
							case 5:
							    this.state = "已办结"
							   break;
						      default:
						 	    this.status = -1
						         this.state = "待申请"
						 } 
						 this.docxFileId = res.data.data.fileId
						 this.normalParking = (JSON.parse(res.data.data.detail)[0].parkType == 0 || JSON.parse(res.data.data.detail)[0].parkType == -1)
						 this.otherParking = (JSON.parse(res.data.data.detail)[0].parkType == -1)
						 if(this.otherParking){
							 this.otherContent = res.data.data.otherContent
						 }
						 if(this.normalParking){
							 this.userList[0] = JSON.parse(res.data.data.detail)[0]
							 for (var i = 0; i < 1; i++) {
							 	let index = i
							 	for (var j = 0; j < 7; j++) {
									if(parseInt(this.userList[index].imageList[j + 7]) > 0){
										this.userList[index].imageList[j] = this.previewUrl + this.userList[index].imageList[j + 7]
									}else{
										this.userList[index].imageList[j] = this.userList[index].imageList[j + 7]
									}
							 	}
							 }
						 }else{
							 this.userList = JSON.parse(res.data.data.detail)
							 for (var i = 0; i < this.userList.length; i++) {
							 	let index = i
							 	for (var j = 0; j < 7; j++) {
									if(parseInt(this.userList[index].imageList[j + 7]) > 0){
										this.userList[index].imageList[j] = this.previewUrl + this.userList[index].imageList[j + 7]
									}else{
										this.userList[index].imageList[j] = this.userList[index].imageList[j + 7]
									}
							 	}
							 }
						 }
						 if(this.status == 4 && this.userList[0].imageList[13] == 0){
							 this.userList[0].imageList[6] = '/static/uploadImg.png'
						 }
						 if(this.status == 4 && this.userList[1].imageList[13] == 0){
						 	 this.userList[1].imageList[6] = '/static/uploadImg.png'
						 }
						 this.processNo = res.data.data.processNo
						 this.spend = res.data.data.price
						 this.proccessListDefult=processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
						 if(this.status > 2){
							 this.chargeImgId = res.data.data.payScreenshotId
							 let b = this.loadImg(this.chargeImgId)
							 b.then((v)=>{
							 	this.chargeImg = v
							 })
						 }


						this.$forceUpdate()
					}
				})
			},
			reAddOrder(){
				if(this.checkPara() == -1){
					return -1
				}
				console.log("[info]","重新提交：" + this.recordId)
				let content = '租户重新发起申请'
				let otherContent = ''
				if(this.otherParking){
					content = '租户重新发起其它类型车位申请，备注:' + this.otherContent
					if(this.otherContent == ''){
						otherContent = '无'
					}else{
						otherContent = this.otherContent
					}
					this.spend = 0
				}else{
					otherContent = '无'
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/parking-space/mod/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						otherContent:otherContent,
						detail: JSON.stringify(this.userList),
						price:this.spend,
						commentMsg: content                       //操作信息
					},
					method:'POST',
					success: function (res) {
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("停车位申请重新提交调用失败")
					}
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onLoad(option) {
			let userInfo = uni.getStorageSync('userinfo')
			if(userInfo != null){
				this.userMsg.userBuilding = userInfo.title
				this.userMsg.userFloor = userInfo.floor
				this.recordId = option.id
				// this.state = option.state
				this.token = uni.getStorageSync('token')
				this.state = option.state
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			//如果是新建表单则不查询
			let buildId = uni.getStorageSync('userinfo').buildId
			let price = syncPriceInfo(3,1,buildId) //查询单价 停车位类，楼盘类 所属楼盘
			price.then((res) => {
				res.data.data.forEach(item => {
					if(item.cardType == 0) this.parkCardPrice.vip = item.price
					if(item.cardType == 0) this.parkCardPrice.normal = item.price
					if(item.cardType == 1) this.parkCardPrice.normal = item.price
					if(item.cardType == 1) this.parkCardPrice.vip = item.price
					if(item.cardType == 2) this.parkCardPrice.double = item.price
				})
				this.spend = this.parkCardPrice.vip
			})
			if(this.state != '待申请'){
				this.getOrder()
			}
		}
	}
</script>

<style>
/* 	@import "../../../static/css/upload-imgs.css"; */
	page{
		background-color: #F1F1F1
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: flex-end;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.picture-part{
		display: flex;
		margin: 0 0 10rpx 50rpx;
		font-size: 100rpx;
		font-weight: 200;
		align-items: center;
		justify-content: center;	
		width: 150rpx;
		height: 150rpx;
		border: dashed 1rpx #000000;
	}
	.picture-style{
		width: 155rpx;
		height: 155rpx;
		margin: 0 0 10rpx 50rpx;
	}
	.picture-note-access{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 50rpx;
		font-size: 30rpx;
	}
	.picture-block-access{
		width: 201rpx;
		display: flex;
		flex-direction: column;
	}
	.picture-block{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 60rpx;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button[disabled]{
		background-color: #555555;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.picture-list{
		display: flex;
		margin-top: 10rpx;
	}
	.wrong-logo{
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -40rpx;
		margin-left: 165rpx;
		z-index: 999;
		background-color: #555555
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.cost-all{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.small-title{
		margin: 20rpx 0 20rpx 50rpx;
	}
	.pay-image{
		margin: 0rpx 0 0rpx 80rpx;
		width: 130rpx;
		height: 130rpx;
	}
	.pay-image-border{
		border:2rpx solid;
		border-radius: 2px;
		margin: 0rpx 0 0rpx 80rpx;
		width: 126rpx;
		height: 126rpx;
	}
	.textarea-name-style{
		display: flex;
		justify-content: center;
		width: 650rpx;
		height: 75rpx;
		font-size: 55rpx;
		margin-left: 50rpx;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
	}
	.textarea-content-style{
		display: flex;
		justify-content: center;
		width: 650rpx;
		height: 150rpx;
		font-size: 28rpx;
		margin-left: 50rpx;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
	}
	.radiogroup-style{
		width: 650rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		margin-left: 50rpx;
		justify-content: center;
		border: solid 1rpx #C0C0C0;
	}
	.first-radio{
		display: flex;
		height: 100rpx;
		width: 180rpx;
		align-items: center;
	}
	.second-radio{
		display: flex;
		height: 100rpx;
		align-items: center;
		margin-left: 50rpx;
	}
	.download-text {
	  -webkit-box-sizing: content-box;
	  -moz-box-sizing: content-box;
	  box-sizing: content-box;
	  border: none;
	  font: normal 16px/1 "Times New Roman", Times, serif;
	  color: rgba(18,25,232,1);
	  text-decoration: underline;
	  -o-text-overflow: ellipsis;
	  text-overflow: ellipsis;
	  margin-left: 60rpx;
	  margin-bottom: 10rpx;
	}
</style>
